<template>
	<view class="view_pages">
		<u-navbar :is-back="true" :custom-back="gotabpolice" back-icon-color="#000000" title-size="34" title="寻找电站" :background="background"
			:border-bottom="false" title-color="#000000"></u-navbar>

		<scroll-view class="scroll_view" style="height: 100%;width: 100%;" scroll-y @scrolltolower="reachBottom">
			<view class="card" v-for="item in list" @click="toSelectPort(item)">
				<view class="_top">
					<view class="left">
						<image src="../../static/images/icons/icon-circle-charging.png" mode=""></image>
						<view class="text">{{item.pdCharginWxd.deviceCode}} </view>
					</view>
					<view :class="item.iotChargingPileDto.onlineResponse.online > 0 ?'right':'right2'" @click.stop ="navmap(item)">
						<image src="../../static/images/icons/icon-fly.png" mode=""></image>
						<view class="text">{{item.distance}} </view>
					</view>
				</view>

				<view class="address">
					<image src="../../static/images/icons/icon-location.png" mode=""></image>
					<view class="text">{{item.pdCharginWxd.adArea}} </view>
				</view>

				<view class="_bottom" v-if="item.iotChargingPileDto.onlineResponse.online > 0 && item.iotChargingPileDto.onlineResponse.signal > 0">
					<view class="status blue">空闲 {{item.iotChargingPileDto.freePortNum}}</view>
					<view class="status gray">充电 {{item.iotChargingPileDto.busyPortNum}}</view>
				</view>
				<view class="_bottom" v-if="item.iotChargingPileDto.onlineResponse.online == 0 && item.iotChargingPileDto.onlineResponse.signal == 0">
					<view class="status gray">抱歉充电站已掉线，请使用其他充电站</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				<u-loadmore :status="status" />
			</view>
			
		</scroll-view>

		<view class="_copyright">
			<view>Copyright©2021</view>
			<view>领程工场软件科技 IOT物联网平台</view>
		</view>
	</view>
</template>

<script>
	import {FindChargingPileList} from '../../api/charging'
	export default {
		data() {
			return {
				background:{ background: '#ffffff' },
				list:[],
				query:{
				  latitude: null,
				  longitude: null,
				  pageNo: 1,
				  pageSize: 10
				},
				status:'loadmore'
			}
		},
		onLoad() {
			let _this = this
			this.query.pageNo = 1
			this.query.pageSize = 10
			this.charlist()
		},
		onShow() {
            this.query.pageNo = 1
            this.query.pageSize = 10
			this.charlist()
		},

		methods:{
			reachBottom() {
				// 此tab为空数据
				// if(this.current != 2) {
				// 	this.loadStatus.splice(this.current,1,"loading")
				// 	setTimeout(() => {
				// 		this.getOrderList(this.current);
				// 	}, 1200);
				// }
				this.status = 'loading';
				this.query = {
					pageNo : this.query.pageNo + 1,
					pageSize : this.query.pageSize,
					longitude:this.query.longitude,
					latitude :this.query.latitude
				}
				console.log('开始下拉刷新',this.query);
				setTimeout(() => {
					FindChargingPileList(this.query).then(res=>{
						let newslist  = res.result.records
						this.list.push.apply(this.list,newslist)
						console.log('原有的数组',this.list)
						
						if(res.result.records.length == 0){
							this.status = 'nomore';
						}else{
							this.status = 'loadmore';
						}
					})
				}, 1000)
				
			},
			//用于重定向过来的页面返回
			gotabpolice(){
				uni.reLaunch({
					url:'../index/index'
				})
			},
			navmap(row){
				console.log(row)
					        uni.openLocation({
					            latitude: row.pdCharginWxd.adLatitude,
					            longitude: row.pdCharginWxd.adLongitude,
					            success: function () {
					                console.log('success');
					            }
					        });
				
			},
			toSelectPort(row){
				
				if(row.iotChargingPileDto.onlineResponse.online == 0 && row.iotChargingPileDto.onlineResponse.signal == 0){
					uni.showToast({
					    title: '充电站已离线',
						icon:'error',
					    duration: 2000
					});
				}else{
					uni.navigateTo({
						url:'./select-port?deviceCode='+row.iotChargingPileDto.chargingCode
					})
				}

			},
			//查找充电站列表
			charlist(){
				let _this = this
				console.log(_this.query)
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						
						_this.query.longitude = res.longitude
						_this.query.latitude = res.latitude
				        FindChargingPileList(_this.query).then(res=>{
				        	console.log(res)
							
							_this.list = res.result.records
				        })
				    },
					fail:function(res2){
                        console.log('无法获取定位')
						// uni.showToast({
						//     title: '无法获取定位',
						// 	icon:'error',
						//     duration: 2000
						// });
					}
				});
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

    ::-webkit-scrollbar {
     
    width:0;
     
    height:0;
     
    color:transparent;
     
    }
._copyright{
	width: 100%;
	height: 80rpx;
	text-align: center;	
    color: #AAAAAA;
        font-weight: 400;
        font-size: 24rpx;
        margin: 30rpx 0rpx;
        position: absolute;
    }
	.view_pages {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #F2F2F2;
		padding: 0 0rpx;
		

.scroll_view{
	flex-grow: 1;
	overflow: hidden;
}
		.card {
            width: 95%;
            margin: 0 auto;
			padding: 32rpx 30rpx 36rpx 30rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 6rpx rgba(215, 215, 215, 0.15);
			border-radius: 12rpx;
margin-top: 30rpx;
			._top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 46rpx;
						height: 46rpx;
					}

					.text {
						margin-left: 18rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #000000;
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 155rpx;
					height: 52rpx;
					background: #0A348B;
					border-radius: 10rpx;

					image {
						width: 46rpx;
						height: 46rpx;
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
				.right2 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 155rpx;
					height: 52rpx;
					background: #CCCCCC;
					border-radius: 10rpx;
				
					image {
						width: 46rpx;
						height: 46rpx;
					}
				
					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}


			.address {
				display: flex;
				margin-top: 30rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-top: 6rpx;
				}

				.text {
					margin-left: 14rpx;
					color: #666666;
					font-weight: 400;
					font-size: 26rpx;
				}
			}

			._bottom {
				display: flex;
					margin-top: 30rpx;
				.status {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					margin-right: 38rpx;

					&::before {
						display: inline-block;
						content: '';
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
			}

			.blue {
				color: #0A348B;
				&::before {
					background-color:#0A348B ;
				}
			}

			.gray {
				color: #BCBCBC;
				&::before {
					background-color:#BCBCBC ;
				}
			}

		}
	}
</style>
